<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="/html/css/formstyle.css">
	<link href='http://fonts.googleapis.com/css?family=Offside' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Acme' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Fugaz+One' rel='stylesheet' type='text/css'>
	<link rel='stylesheet' href='/html/css/slider_multiple.css' />  
	<script type="text/javascript" src="/html/javascript/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="/html/javascript/votingSystem.js"></script>
	
	<script type="text/javascript">
	
	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-42088406-1']);
	  _gaq.push(['_trackPageview']);
	
	  (function() {
	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();
	</script>
	<link rel="shortcut icon" href="/html/resources/favicon.ico" />
	<title>Piczul - Create Post</title>
</head>
<body>
	
	<div class="navbar">
		
		
		<div id="icons">
			<a href="/"><h1>Pic<span>zul</span></h1></a>
			
			<!-- div id="socialButons">
				<a href="https://www.facebook.com/"  target="_blank"><img class="facebook" src="/html/resources/facebook.png"></a>
				<a href="https://plus.google.com/" target="_blank"><img class="googlePlus" src="/html/resources/gplus.png"></a>
				<a href="https://twitter.com/" target="_blank"><img class="twitter" src="/html/resources/twitter.png" ></a>
			</div-->
		</div>
	</div>
	
	<div id="container">
		<div id="create">
			<div style="display:none;" class="postErrors">
					<p>Errors with Post</p>
					<ul>
					</ul>
			</div>
		
			<h2>Create new post</h2>
			<div id="rules">
			<p>Please abide by the rules stated below to keep visits to this site fun and friendly for users of all ages:</p>
			<ol>
				<li>Do <strong>not</strong> post adult content which includes, but is not restricted to, nudity, pornography and gore. </li>
				<li>Do <strong>not</strong> post any pictures containing personal information.</li>
			</ol>
			</div>
			<form method="post" action="create" enctype="multipart/form-data" onsubmit="return validatePost()">
				<p>
					<label for="name"><strong>Title</strong></label>
					<input name="title" type="text" id="title"/>
					
				</p>
				<p>
					<label for="username"><strong>Username</strong></label>
					<input name="username" type="text" id="username"/>
					
				</p>
				<p>
					<label for="image"><strong>Submit Image</strong></label>
				    <input type="file" name="myImage" id="myImage">
	
				</p>
				<p>
					<input value="Submit" type="submit" id="submit">
				</p>
			</form>
			<div id="advert">
			<!-- <img src="/html/resources/leaderad.png" alt=""/>-->
			</div>
		</div>
		<div class="rightNav">
			<script type="text/javascript">
				ch_client = "ciarangeorge";
				ch_width = 250;
				ch_height = 250;
				ch_type = "mpu";
				ch_sid = "Chitika Default";
				ch_color_site_link = "0000CC";
				ch_color_title = "0000CC";
				ch_color_border = "FFFFFF";
				ch_color_text = "000000";
				ch_color_bg = "FFFFFF";
				</script>
				<script src="http://scripts.chitika.net/eminimalls/amm.js" type="text/javascript">
			</script>
			<div id=seperator></div>
			<div id="topPosts">
			<p><strong>View our top posts!</strong></p>
			
				<div id='my_carousel_ct' class='carousel-container'>  
			      <div id="my_carousel_1" class="carousel slide">
			        <!-- Carousel items -->
			        <div id="my_carousel_2" class="carousel-inner rs-slider">
			        <#assign x = 1>
			        <#list topPosts as topPost>
				        <#if pageNum == 1>
				          	<div class="item active">
					            <div class="ts_border">
					            	<a href="/post/${topPost.id}">
					              	<img src="/Image/${topPost.blobId}">
					              	<div class="carousel-caption">
					                	<h4>${topPost.title}</h4>
					                  	<p class="ts_txt">
					                    	<p>${topPost.title}</p>
					                  	</p>
					              	</div>
					              	</a>
					            </div>
					          </div>
					     <#else>	
							<div class="item">
					            <div class="ts_border">
					            <a href="/post/${topPost.id}">
					              <img src="/Image/${topPost.blobId}">
					              <div class="carousel-caption">
					                <h4>${topPost.title}</h4>
					                  <p class="ts_txt">
					                    <p>${topPost.title}/p>
					                  </p>
					              </div>
					              </a>
					            </div>
					          </div>
					    </#if>
				   	<#assign x = x + 1>
			        </#list>                          
			        </div>      
			        <!-- Carousel nav -->
			        <a class="carousel-custom" href="#my_carousel_1" data-slide="prev">&lsaquo;</a>
			        <a class="carousel-custom" href="#my_carousel_1" data-slide="next">&rsaquo;</a>
			      </div>	
			    </div>
					<!--<div id="advertside">
					<img src="/html/resources/mediumrectad.png" alt=""/>
					</br>
					<img src="/html/resources/mediumrectad.png" alt=""/>
					</div> -->
				</div>
				<div id=seperator></div>
				<div id="adRef">
					<a href="http://www.chitika.com/publishers/apply?refid=ciarangeorge"><img src="http://images.chitika.net/ref_banners/250x250_using_adsense.gif" /></a>
				</div>
			</div>
	</div>
	<script type='text/javascript' src='/html/javascript/wpts_slider_multiple.js'></script>
    <script>
      jQuery(document).ready(function(e) {
         jQuery('#my_carousel_ct').tsSlider({
           thumbs:''
          , width:'100%'
          , showText: false 
          , autoplay:3000
          , imgWidth: 100
          , imgHeight: 100
          , imgMarginTop: 0
          , imgMarginLeft: 0
          , squared: true 
          , textSquarePosition: 4 
          , textPosition: 'top'
          , imgAlignment: 'Center'
          , textColor: 'F00'
          , skin: 'transparent'
          , arrows:'ts-arrow-1'
          , sliderHeight: 200 
          , effects:'fade'
					, titleBold: 'false'
					, titleItalic: 'false'
					, textBold: 'true' 
					, textItalic: 'false' 
					, textWidth: 90
          , background_sld:'#FFF'
          , background_caption:'#000'
         });		
      });
    </script>
</body>
<script type="text/javascript" src="/html/javascript/validation.js"></script>
</html>